<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import { yonghu } from '@/api/tjbb/sptj.js';
import * as echarts from 'echarts';
export default {
  name: 'DocumentsOrder',

  data() {
    return {
        time:[],
        amount:[],
        orders:[],
        products:[]
    };
  },

  mounted() {
    this.getlist()
  },

  methods: {
    getlist(){
      yonghu()
      .then((res) =>{
        console.log(res);
        this.row=res.data.rows
        for (let i = 0; i < this.row.length; i++) {
              this.time.push(this.row[i].day);
              this.amount.push(this.row[i].amount);
              this.products.push(this.row[i].products);
              this.orders.push(this.row[i].orders);
              
            }
        this.show()
      })
    },
    show(){
      var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['订单量', '下单货品数量', '下单货品总额']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: this.time
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '订单量',
      type: 'line',
      stack: 'Total',
      data: this.orders,
      smooth:'true'
    },
    {
      name: '下单货品数量',
      type: 'line',
      stack: 'Total',
      data: this.products,
      smooth:'true'
    },
    {
      name: '下单货品总额',
      type: 'line',
      stack: 'Total',
      data: this.amount,
      smooth:'true'
    }
  ]
};

option && myChart.setOption(option);
    }
  },
};
</script>
<style scoped>
  #main{
    height: 400px;
  }

</style>